<template>
  <div class="cont m-relative">
    <a-button type="primary" :loading="loading" class="m-absolute t-20 r-20" @click="getDetail(true)"
      >刷新基础信息</a-button
    >
    <div class="flex" :bordered="false" v-if="userDetail">
      <a-image
        :src="userDetail.wxInfo.vcHeadImgUrl"
        width="130"
        height="130"
        fit="contain"
        class="round-10 mr-20"
      ></a-image>
      <div class="flex-col">
        <div class="flex flex-a-c font-bold">
          <span class="text-size-20">{{ userDetail.wxInfo.vcNickName }}</span>
          <span class="ml-m text-size-16 texta6">微信号：{{ userDetail.wxInfo.vcRobotWxId }}</span>
        </div>
        <div class="status w-fit flex flex-a-c mt-6">
          <GiDot
            :animation="false"
            :type="statusArr[userDetail.status] ? statusArr[userDetail.status].type : 'info'"
            :text="statusArr[userDetail.status] ? statusArr[userDetail.status].desc : '未知'"
          />
          <!-- <div class="round-4 px-10 py-4 textf5574e text-size-14 bgFEF6F6 borderf5574e">
            {{ userDetail.address }}
          </div> -->
          <div class="round-4 px-10 py-4 textf5574e text-size-14 bgFEF6F6 borderf5574e">
            设备位：{{ userDetail.deviceCode || '--' }}
          </div>
          <div class="round-4 px-10 ml-10 py-4 textf5574e text-size-14 bgFEF6F6 borderf5574e">
            dbIndex：{{ userDetail.dbIndex }}
          </div>
          <div class="round-4 px-10 ml-10 py-4 textf5574e text-size-14 bgFEF6F6 borderf5574e">
            服务地址：{{ userDetail.serverIndex }}
          </div>
          <div
            class="round-4 px-10 ml-10 py-4 textf5574e text-size-14 bgFEF6F6 borderf5574e"
            :class="userDetail.supplierId != 1 ? 'cursor-pointer' : ''"
            @click="checkToGdF(userDetail.supplierId != 1)"
          >
            {{ userDetail.supplierId == 1 ? '果冻' : 'eco' }}
            <icon-swap v-if="userDetail.supplierId != 1" />
          </div>
          <span class="ml-m text-size-14">
            剩余时长：
            <template v-if="!userDetail.expiresAt">
              <span>--</span>
            </template>
            <template v-else>
              <a-countdown
                :value="new Date(userDetail.expiresAt).getTime()"
                :now="Date.now()"
                format="D天HH:mm:ss"
                :value-style="{ fontSize: '14px' }"
              />
            </template>
          </span>
        </div>
        <a-space class="mt-6 text-size-14">
          <div class="invited text505050 px-12 py-6 round-14">
            邀请码：{{ userDetail.inviteCode || '--' }} | 共{{ userDetail.deviceNum }}个 | 在线{{
              userDetail.deviceOnlineNum
            }}个
          </div>
          <a-button type="primary" shape="round" @click="switchingDevices({ userId: userDetail.userId })">
            <template #icon><icon-swap /></template>
            切换设备
          </a-button>
          <a-button type="primary" shape="round" @click="compensate([userDetail.userWechatId])">
            <template #icon><icon-clock-circle /></template>
            补偿时间
          </a-button>
          <!-- <a-button type="primary" shape="round" @click="toApp(userDetail.appLink)">
            <template #icon><icon-apps /></template>
            前往客户端
          </a-button> -->
          <a-button type="primary" shape="round" status="warning" @click="getStatus">
            <template #icon><icon-bulb /></template>
            状态检测
          </a-button>
        </a-space>
        <a-space class="mt-10 text-size-14">
          <span>开通时间：{{ userDetail.createdAt || '--' }}</span>
          <span>到期时间：{{ userDetail.expiresAt || '--' }}</span>
        </a-space>
      </div>
    </div>
    <a-tabs class="mt-20 w-full flex-1" v-model="key">
      <a-tab-pane key="1" title="跟发源头群">
        <Gfytq :userWechatId="userWechatId" />
      </a-tab-pane>
      <!-- <a-tab-pane key="2" title="智能跟圈">
        <Zngq :userWechatId="userWechatId" />
      </a-tab-pane> -->
      <!-- <a-tab-pane key="3" title="一键发群">
        <Yjfqun :userWechatId="userWechatId" />
      </a-tab-pane> -->
      <!-- <a-tab-pane key="4" title="一键发圈">
        <Yjfquan :userWechatId="userWechatId" />
      </a-tab-pane> -->
      <a-tab-pane key="5" title="智选跟群">
        <Zxgq :userWechatId="userWechatId" />
      </a-tab-pane>
      <!-- <a-tab-pane key="6" title="智能打招呼">
        <Zndzh :userWechatId="userWechatId" />
      </a-tab-pane> -->
      <!-- <a-tab-pane key="7" title="个人号">
        <Grh :userWechatId="userWechatId" />
      </a-tab-pane> -->
      <!-- <a-tab-pane key="8" title="关键词回复">
        <Gjchf :userWechatId="userWechatId" />
      </a-tab-pane> -->
      <!-- <a-tab-pane key="9" title="中控群管理">
        <Zkqgl :userWechatId="userWechatId" />
      </a-tab-pane> -->
      <!-- <a-tab-pane key="10" title="群管理">
        <Qgl :userWechatId="userWechatId" />
      </a-tab-pane> -->
      <a-tab-pane key="11" title="操作日志">
        <Czrz :userWechatId="userWechatId" />
      </a-tab-pane>
    </a-tabs>
    <Monitoring ref="MonitoringRef"></Monitoring>
    <SwitchingDevices ref="SwitchingDevicesRef" @switchingDevices="switchingDevices"></SwitchingDevices>
    <EditDrawer ref="EditDrawerRef" @getTableData="getTableData" @restore="getDetail" />
  </div>
</template>

<script setup>
import { wechatDetail, checkToGd } from '@/apis'
import { statusArr } from '../../data'
import Gfytq from './gfytq/index.vue'
import Zngq from './zngq/index.vue'
import Yjfqun from './yjfqun/index.vue'
import Yjfquan from './yjfquan/index.vue'
import Zxgq from './zxgq/index.vue'
import Zndzh from './zndzh/index.vue'
import Grh from './grh/index.vue'
import Gjchf from './gjchf/index.vue'
import Zkqgl from './zkqgl/index.vue'
import Qgl from './qgl/index.vue'
import Czrz from './czrz/index.vue'
import { useTabsStore } from '@/store'
import Monitoring from './Monitoring.vue'
import EditDrawer from '../EditDrawer.vue'
import SwitchingDevices from './SwitchingDevices.vue'
import { Message, Modal } from '@arco-design/web-vue'

defineOptions({ name: 'equipmentDetail' })

const route = useRoute()

const userDetail = ref()
const loading = ref(false)
const MonitoringRef = ref()
const EditDrawerRef = ref()
const SwitchingDevicesRef = ref()
const key = ref(1)
const userWechatId = ref(route.query.userWechatIdO)

const getDetail = async (flag = false) => {
  try {
    loading.value = true
    const res = await wechatDetail({ userWechatId: userWechatId.value })
    userDetail.value = res.data
    useTabsStore().changeTagTitle(`用户[${res.data?.wxInfo?.vcNickName || ''}]详情`)
    flag && Message.success('刷新成功')
  } finally {
    loading.value = false
  }
}

getDetail()

const getStatus = () => {
  MonitoringRef?.value?.getStatus(userWechatId.value)
}

// 补偿时长
const compensate = (keys) => {
  if (keys.length) {
    EditDrawerRef?.value.compensate(keys)
  }
}

// 切换设备
const switchingDevices = (info) => {
  if (info.userId) {
    SwitchingDevicesRef?.value.getList(info.userId)
  } else if (info.userWechatId) {
    userWechatId.value = info.userWechatId
    route.query.userWechatIdO = info.userWechatId
    getDetail()
  }
}

// 切换到果冻版本
const checkToGdF = (status) => {
  console.log(status)
  if (!status) return false
  Modal.warning({
    title: '提示',
    content: '是否为该用户切换设备位？',
    hideCancel: false,
    onOk: () => {
      checkToGd({ userWechatId: userWechatId.value }).then(() => {
        Message.success('操作成功')
        getDetail()
      })
    }
  })
}

// 前往客户端
const toApp = (appLink) => {
  if (appLink) {
    window.open(appLink)
  }
}
</script>

<style lang="scss" scoped>
.cont {
  height: 100%;
  overflow: hidden;
  margin: $margin;
  background: var(--color-bg-1);
  padding: $padding;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .form {
    :deep(.arco-form-item) {
      margin-bottom: 10px;
    }
  }
  :deep(.arco-tabs) {
    display: flex;
    flex-direction: column;
  }

  :deep(.arco-tabs-content) {
    flex: 1;
  }

  :deep(.arco-tabs-content-list) {
    height: 100%;
  }

  :deep(.arco-tabs-pane) {
    height: 100%;
  }
}
.status {
  :deep(.arco-btn-text) {
    margin-left: -10px;
  }
}
.texta6 {
  color: #a6a6a6;
}
.textf5574e {
  color: #f5574e;
}
.borderf5574e {
  border: 1px solid #faaba6;
}
.bgFEF6F6 {
  background: #fef6f6;
}
.text505050 {
  color: #505050;
}
.invited {
  background: rgb(var(--primary-1));
  border: 1px solid rgb(var(--primary-6));
}
</style>
